// This is built on ember-power-select
.multiselect {
  min-width: 300px;
  background-image: var(--token-form-select-background-image-data-url);
  background-position: right
    var(--token-form-select-background-image-position-right-x) top
    var(--token-form-select-background-image-position-top-y);
  background-size: var(--token-form-select-background-image-size);
  background-repeat: no-repeat;
  box-shadow: var(--token-elevation-low-box-shadow);
  @apply p-1;

  &--narrow {
    min-width: 0;
  }

  &.selection-made {
    @apply bg-none;

    input {
      @apply hidden;
    }
  }

  &.ember-power-select-trigger,
  &.ember-power-select-trigger-multiple-input {
    line-height: 1;
    @apply h-auto min-h-[36px];
  }

  &:hover,
  &.mock-hover {
    border-color: var(--token-form-control-base-border-color-hover);
  }

  &:focus,
  &.mock-focus {
    border-color: var(--token-color-focus-action-internal);
    outline: 3px solid var(--token-color-focus-action-external);
    outline-offset: 0px;
  }

  .ember-power-select-status-icon {
    display: none;
  }

  .ember-power-select-multiple-options {
    @apply mr-6 flex h-full w-full flex-wrap gap-2.5;
  }

  .ember-power-select-option {
    @apply py-px px-3.5;

    &:first-child {
      @apply mt-[3px];
    }

    &:last-child {
      @apply mb-[3px];
    }
  }

  .ember-power-select-trigger-multiple-input {
    @apply min-w-[80px] px-[3px] text-body-200 placeholder:text-color-foreground-disabled;

    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .ember-power-select-multiple-option {
    @apply relative inline-flex max-w-full items-center border-0 text-color-foreground-strong;

    // Compensate for the chip padding by setting negative margins.
    // Allows content to maintain its position in both the edit and read-only states.
    @apply -my-1 -ml-[3px] -mr-1 py-1 px-0 pl-[3px] pr-7;

    .ember-power-select-multiple-remove-btn {
      @apply absolute right-1 z-10 grid h-5 w-5 shrink-0 place-items-center rounded-sm pb-px text-color-foreground-primary;

      &:hover {
        @apply bg-neutral-200;
      }

      &:focus,
      &:active {
        outline: 2px solid var(--token-color-focus-action-internal);
      }
    }
  }
}
